<script setup lang="ts">
import { ref } from 'vue'

const userInfo = ref<{
  username?: string
  role?: {
    menu: string[]
  }
}>({})

setTimeout(() => {
  userInfo.value = {
    username: '张三',
    role: {
      menu: ['a']
    }
  }
}, 5000)
// 可选链操作符 ? 它是js的东西
// 变量.属性?.属性
// 如果问号前的值 为null或者undefined，它将返回undefined,如果非null与undefined返回会面的值
/*
 变量.属性?.属性
  if(变量.属性===null || 变量.属性===undefined){
    retrun undefined
  }else{
    return 变量.属性.属性
  }
*/
const inputDom = ref<HTMLInputElement | undefined>()
const getDom = () => {
  console.log(inputDom.value?.value)
}
const arr = ref([
  { id: 1, name: '西瓜' },
  { id: 2, name: '香蕉' }
])
const findName = (id: number) => {
  const findItem = arr.value.find(item => {
    return item.id === id
  })
  return findItem?.name
}
</script>

<template>
  <div class="app-page">
    <div>用户名:{{ userInfo.username }}</div>
    <div>其它信息:{{ userInfo.role?.menu }}</div>
    <input type="text" ref="inputDom" />
    <button @click="getDom">获取inputdom</button>
  </div>
</template>

<style scoped></style>
